<template>
  <div class="container">
    <div class="title">实名认证</div>
    <!--     实名认证之前-->
    <div class="authentication_before" v-if="userInfo?.authStatus===0">
      <el-card>
        <template #header>
          <div class="card-header">
            <svg t="1712046352950" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="5165" width="48" height="48">
              <path
                  d="M567.59 559.5m-345.51 0a345.51 345.51 0 1 0 691.02 0 345.51 345.51 0 1 0-691.02 0Z" fill="#B9D6F9"
                  p-id="5166"></path>
              <path
                  d="M499.76 877.2a365.08 365.08 0 1 1 142.54-28.79 363.93 363.93 0 0 1-142.54 28.79z m0-677.3a311.15 311.15 0 1 0 220 91.13 309.09 309.09 0 0 0-220-91.13z"
                  fill="#1060C1" p-id="5167"></path>
              <path
                  d="M499.76 607.5a27.5 27.5 0 0 1-27.5-27.5V315.51a27.5 27.5 0 0 1 55 0V580a27.5 27.5 0 0 1-27.5 27.5z"
                  fill="#1060C1" p-id="5168"></path>
              <path d="M499.77 691.75m-38.75 0a38.75 38.75 0 1 0 77.5 0 38.75 38.75 0 1 0-77.5 0Z" fill="#000333"
                    p-id="5169"></path>
              <path
                  d="M499.76 731A39.25 39.25 0 1 1 539 691.75 39.3 39.3 0 0 1 499.76 731z m0-77.5A38.25 38.25 0 1 0 538 691.75a38.29 38.29 0 0 0-38.24-38.25z"
                  fill="#1060C1" p-id="5170"></path>
            </svg>
            <span>完成实名认证之后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证</span>
          </div>
        </template>
        <!--         中间-->
        <el-form
            style="max-width: 800px;margin: 0 auto"
            :model="formData"
            :rules="rules"
            ref="form"
        >
          <el-form-item label="姓名:" label-width="100px" style="margin: 40px 0" prop="name">
            <el-input placeholder="请输入姓名" style="width: 80%" v-model="formData.name"/>
          </el-form-item>
          <el-form-item label="证件类型:" label-width="100px" style="margin: 40px 0" prop="certificatesType">
            <el-select placeholder="请选择证件类型" style="width: 80%" v-model="formData.certificatesType">
               <el-option :label="item.name" :value="item.value" v-for="item in typeArr" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
            <el-input placeholder="请输入证件号码" style="width: 80%" v-model="formData.certificatesNo"/>
          </el-form-item>
          <el-form-item label="上传证件:" label-width="100px" style="margin: 40px 0" prop="certificatesUrl">
            <el-upload
                action="http://syt.atguigu.cn/api/oss/file/fileUpload?fileHost=userAuah"
                list-type="picture-card"
                :limit="1"
                :on-exceed="exceedhandler"
                :on-success="successhandler"
                :on-error="errorhandler"
                :on-preview="previewhandler"
                ref="upload"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
            <div class="example">
              <img src="@/assets/images/auth_example.png" alt="">
            </div>
          </el-form-item>
        </el-form>
      </el-card>
      <div class="submit">
        <el-button type="primary" class="subBtn" @click="postauthentication">提交</el-button>
      </div>
      <el-dialog
          v-model="dialogVisible"
          title="预览"
          width="500"
      >
        <img :src="formData?.certificatesUrl" alt="" style="width: 100%;height: 100%">

      </el-dialog>
    </div>
    <!--     实名认证之后-->
    <div class="authentication_after" v-if="userInfo?.authStatus===1">
      <el-card>
        <template #header>
          <div class="card-header">
            <svg t="1712048806361" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1589" width="48" height="48"><path d="M571.55 559.5m-345.51 0a345.51 345.51 0 1 0 691.02 0 345.51 345.51 0 1 0-691.02 0Z" fill="#B9D6F9" p-id="1590"></path><path d="M507.1 876.22a365.13 365.13 0 1 1 142.53-28.79 363.89 363.89 0 0 1-142.53 28.79z m0-677.3a311.14 311.14 0 1 0 220 91.13 309.12 309.12 0 0 0-220-91.13z" fill="#1060C1" p-id="1591"></path><path d="M447.84 651.3a76 76 0 0 1-57.67-26.41l-69.7-74.7a27.5 27.5 0 1 1 40.22-37.52l70.1 75.14c0.3 0.32 0.6 0.65 0.88 1a21.19 21.19 0 0 0 32.57-0.26l0.25-0.3 176.65-209.64a27.5 27.5 0 1 1 42.06 35.44l-176.54 209.5a76 76 0 0 1-58.19 27.75z" fill="#1060C1" p-id="1592"></path></svg>
            <span>已完成实名认证</span>
          </div>
        </template>
        <!--         中间-->
        <el-descriptions title="实名信息" :column="1" border >
          <el-descriptions-item label="姓名" label-align="center" width="20px" align="center">{{userInfo?.name
            }}</el-descriptions-item>
          <el-descriptions-item label="证件类型" label-align="center" width="20px"
                                align="center">{{userInfo?.certificatesType==='10'?"身份证":"户口本"}}
          </el-descriptions-item>
          <el-descriptions-item label="证件号码" label-align="center" width="20px" align="center">{{userInfo?.certificatesNo
            }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted,ref,reactive} from "vue";
import {Plus} from '@element-plus/icons-vue'
import {reqauthentication, reqDocumentType, reqUserInfo} from "@/api/user";
import {userInfoResponseData,documentTypeResponseData} from '@/api/user/type.ts'
import { ElMessage } from 'element-plus'
import {preview} from "vite";
// 用户信息
const userInfo=ref()
// 证件类型
const typeArr=ref()
// 表单数据
const formData=reactive({
  certificatesNo: "",
  certificatesType: "",
  certificatesUrl: "",
  name: ""
})
// 选择身份证---0还是户口本---1
const typeFlag=ref<number>()
// 获取表单
let form=ref()
// 获取照片墙
let upload = ref();


// 姓名的验证规则
const validatorName=(rule: any, value: any, callBack: any)=>{
  const reg = /^[\u00B7\u3007\u3400-\u4DBF\u4E00-\u9FFF\uE000-\uF8FF\uD840-\uD8C0\uDC00-\uDFFF\uF900-\uFAFF]+$/;
  if(reg.test(value)){
    callBack()
  }
  else {
    callBack(new Error("请输入正确中国人的名字"))
  }
}
// 证件类型的验证规则
const validatorType=(rule: any, value: any, callBack: any)=>{
  if(value==='10'){
    typeFlag.value=0
    callBack()
  }
  if(value==='20'){
    typeFlag.value=1
    callBack()
  }
  else {
    callBack(new Error("请选择证件类型"))
  }
}
// 证件号码的验证规则
const validatorNo=(rule: any, value: any, callBack: any)=>{
    // 身份证的验证规则
  let sfz = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
    // 户口本的校验规则
  let hkb = /^\d{9}$/;
    // 选择身份证
    if(typeFlag.value===0 && sfz.test(value)){
        callBack()
    }
    // 选择户口本
    if(typeFlag.value===1 && hkb.test(value)){
      callBack()
    }
    else {
      callBack(new Error("请输入正确的身份证或者户口本的号码"));
    }
}
// 图片的验证规则
const validatorUrl=(rule: any, value: any, callBack: any)=>{
  if (value.length) {
    callBack();
  } else {
    callBack(new Error("请上传证件照图片"));
  }
}

// 表单验证规则
const rules={
  name:[
    { required:true,
      validator:validatorName
    }
  ],
  certificatesNo:[
    { required:true,
      validator:validatorNo
    }
  ],
  certificatesType:[
    { required:true,
      validator:validatorType
    }
  ],
  certificatesUrl:[
    { required:true,
      validator:validatorUrl
    }
  ]
}


// 控制预览图的弹出框
const dialogVisible=ref<boolean>(false)

onMounted(()=>{
  getUserInfo()
  getDocumentType()
})

// 获取用户信息的请求
const getUserInfo=async ()=>{
  let res:userInfoResponseData=await reqUserInfo()
  userInfo.value=res.data
}

// 获取证件类型的请求
const getDocumentType=async ()=>{
  let res:documentTypeResponseData=await reqDocumentType()
  typeArr.value=res.data
}


// 图片超出数量限制的处理函数
const exceedhandler=()=>{
  ElMessage({
    type: 'error',
    message: '最多只能上传一张！',
  })
}

// 图片成功上传的处理函数
const successhandler=(response: any)=>{
   formData.certificatesUrl=response.data
}

// 图片上传失败的处理函数
const errorhandler=(error:Error)=>{
   ElMessage({
     type:"error",
     message:error
   })
}

// 预览图片的处理函数
const previewhandler=()=>{
  dialogVisible.value=true
}


// 提交表单数据，进行实名认证的请求
const postauthentication=async ()=>{
  //全部的表单校验通过返回一个成功的promise
  //如果有一个表单校验失败返回的是一个失败的promise对象,后面的语句就不在执行了
  await form.value.validate();
  try{
    await reqauthentication(formData)
    ElMessage({
      type:'success',
      message:'实名认证成功！'
    })
    // 重新获取用户信息
    getUserInfo()
  }
  catch (err){
    ElMessage({
      type:'error',
      message:'实名认证失败！'
    })
  }
}

</script>

<style scoped lang="scss">
.container {
  .title {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 1px;
    font-weight: 700;
    color: #333;
    font-size: 16px;
    margin-bottom: 20px;

  }

  .authentication_before {
    .card-header {
      background-color: #F4F9FF;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      span {
        font-size: 15px;
        margin-left: 20px;
        color: grey;
      }
    }

    .example {
      width: 160px;
      height: 160px;
      margin-left: 30px;

      img {
        width: 100%;
        height: 90%;
      }
    }

    .submit {
      margin-top: 50px;
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      .subBtn {
        width: 120px;
        height: 50px;
      }
    }
  }

  .authentication_after {
    .card-header {
      background-color: #F4F9FF;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      span {
        font-size: 15px;
        margin-left: 20px;
        color: grey;
      }
    }
  }
}
</style>